<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{include :: header('频道列表')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mb-2">
    <div class="toolbar" id="toolbar" role="group">
        <a class="btn btn-success" onclick="addChannel()">
            <i class="fa fa-plus"></i> 添加频道
        </a>
    </div>
    <table id="bootstrap-table" class="table-striped"></table>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: bootstrap-table-js}" />
<script th:inline="javascript">

    $(function () {
        var options = {
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            url: "/channel/list.json",
            removeUrl: "/channel/remove.json",
            modalName: "频道设置",
            columns: [
                {
                    field: 'channelId',
                    align: 'center',
                    title: '频道ID',
                    width: '120px'
                },
                {
                    field: 'channelName',
                    title: '频道名称'
                },
                {
                    field: 'channelType',
                    title: '频道类别',
                    formatter: function (value, row, index) {
                        switch (value) {
                            case 0:
                               return  "系统";
                            case 1:
                                return  "内部";
                            case 2:
                                return "外部";
                            default:
                                return"-";
                        }
                    }
                },
                {
                    field: 'linkUrl',
                    title: '链接地址'
                },
                {
                    field: 'isHide',
                    title: '是否隐藏',
                    formatter: function (value, row, index) {
                        if (value === 0) {
                            return '<span class="badge badge-primary">正常</span>'
                        } else {
                            return '<span class="badge badge-danger">隐藏</span>'
                        }
                    }
                },
                {
                    field: 'isDisabled',
                    title: '是否禁用',
                    formatter: function (value, row, index) {
                        if (value === 0) {
                            return '<span class="badge badge-primary">正常</span>'
                        } else {
                            return '<span class="badge badge-danger">禁用</span>'
                        }
                    }
                },
                {
                    field: 'sort',
                    align: 'center',
                    title: '排序'
                },
                {
                    title: '操作',
                    align: 'left',
                    width: '200px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="editChannel(\'' + row.channelId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        if (row.isDisabled === 0) {
                            actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="isDisabled(\'' + row.channelId + '\',\'' + 1 + '\')"><i class="fa fa-remove"></i>禁用</a> ');
                        } else {
                            actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="isDisabled(\'' + row.channelId + '\',\'' + 0 + '\')"><i class="fa fa-eyedropper"></i>启用 </a> ');
                        }

                        if(row.channelType > 0){
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.channelId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        }
                        else {
                            actions.push('<a class="btn btn-danger btn-xs disabled" href="javascript:void(0)"><i class="fa fa-remove"></i>删除</a>');
                        }
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    function isDisabled(id, disabled) {
        table.set();
        var str = "";
        if (disabled === 1) {
            str = "确定要禁用该频道吗？"
        } else {
            str = "确定要启用该频道吗？"
        }
        $.modal.confirm(str, function () {
            var data = {"channelId": id, "isDisabled": disabled};
            $.operate.submit("/channel/disabled.json", "post", "json", data);
        });
    }
    function addChannel(){
        var index = layer.open({
            title: '添加频道',
            type: 2,
            shade: 0.2,
            shadeClose: true,
            area: ['80%', '92%'],
            content: '/channel/add.html'
        });
    }

    function editChannel(channelId) {
        var index = layer.open({
            title: '修改频道信息',
            type: 2,
            shade: 0.2,
            shadeClose: true,
            area: ['80%', '92%'],
            content: '/channel/edit.html?id=' + channelId
        });
    }
</script>
</body>
</html>